/**
 * =============================================================================
 * ************   Slider 滑块   ************
 * =============================================================================
 */

@slider-light-color: #bdbdbd; // rgba(0, 0, 0, .26)
@slider-light-color-focus: #9e9e9e; // rgba(0, 0, 0, .38)
@slider-light-color-disabled: #bdbdbd; // rgba(0, 0, 0, .26)

@slider-dark-color: #4c4c4c; // rgba(255, 255, 255, .3)
@slider-dark-color-focus: #4c4c4c; // rgba(255, 255, 255, .3)
@slider-dark-color-disabled: #4c4c4c; // rgba(255, 255, 255, .3)

.mdui-slider {
  position: relative;
  display: block;
  height: 36px;
  margin-right: 10px;
  margin-left: 10px;

  input[type="range"] {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 20px;
    margin-top: -10px;
    cursor: pointer;
    opacity: 0;
    appearance: none;
  }
}

.mdui-slider-track,
.mdui-slider-fill {
  position: absolute;
  top: 50%;
  box-sizing: border-box;
  height: 2px;
  margin-top: -1px;

  &::before {
    display: block;
    width: 100%;
    height: 100%;
    content: ' ';
  }
}

/* 轨道 */
.mdui-slider-track {
  right: 0;

  &::before {
    background-color: @slider-light-color;
    transition: background-color .3s @animation-curve-default;
  }
}

/* 已滑动部分 */
.mdui-slider-fill {
  left: 0;

  &::before {
    background-color: @color-default-a200;
  }
}

/* 滑块 */
.mdui-slider-thumb {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  cursor: pointer;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #5e5e5e;
    border-radius: 50%;
    transform: scale(0);
    opacity: 0.3;
    transition: transform .25s @animation-curve-default;
    content: "";
  }

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background-color: @color-default-a200;
    border: 2px solid @color-default-a200;
    border-radius: 50%;
    transform: scale(.6);
    transition:
      background .45s @animation-curve-default,
      border-color .45s @animation-curve-default,
      transform .2s @animation-curve-default;
    content: "";
    will-change: background, border-color, transform;
  }
}

/* 滑块值显示 */
.mdui-slider-label {
  position: absolute;
  bottom: 30px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 12px;
  background-color: @color-default-a200;
  border: none;
  border-radius: 15px 15px 15px 0;
  transform: translate(-50%) rotate(-45deg) scale(0);
  transition: transform .25s @animation-curve-default;

  span {
    position: absolute;
    white-space: nowrap;
    transform: rotate(45deg);
  }
}

/**
 * =============================================================================
 * ************   Slider 强调色   ************
 * =============================================================================
 */

& {
  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
    .loop-accent-theme((@counter-color - 1));
    @colorName: extract(@globalAccentColors, @counter-color);

    @color: 'color-@{colorName}-a200';

    .mdui-theme-accent-@{colorName} when not (@colorName =null) {

      .mdui-slider-fill {

        &::before {
          background-color: @@color;
        }
      }

      .mdui-slider-thumb {

        &::after {
          background-color: @@color;
          border: 2px solid @@color;
        }
      }

      .mdui-slider-lable {
        background-color: @@color;
      }
    }
  }

  .loop-accent-theme(length(@globalAccentColors));
}

/**
 * =============================================================================
 * ============   Slider 的不同状态   ============
 * =============================================================================
 */

/* 滑块值为 0 */
.mdui-slider-zero {
  .mdui-slider-thumb::after {
    background-color: #fff;
    border-color: @slider-light-color;
  }

  .mdui-slider-label {
    background-color: @slider-light-color;
  }
}

input[type="range"]:not(:disabled):hover {
  ~.mdui-slider-thumb::before {
    transform: scale(0.7);
  }
}

/* 鼠标按下状态 */
.mdui-slider-actived {
  .mdui-slider-track {
    &::before {
      background-color: @slider-light-color-focus;
    }
  }

  .mdui-slider-thumb {
    &::after {
      transform: scale(0.8);
    }

    .mdui-slider-label {
      transform: translate(-50%) rotate(-45deg) scale(1);
    }
  }
}

/* 禁用状态 */
.mdui-slider-disabled {
  input[type="range"] {
    cursor: default;
  }

  .mdui-slider-track {

    &::before {
      background-color: @slider-light-color-disabled;
    }
  }

  .mdui-slider-fill {

    &::before {
      background-color: @slider-light-color-disabled;
    }
  }

  .mdui-slider-thumb {
    cursor: default;

    &::after {
      background-color: @slider-light-color-disabled;
      border-color: transparent;
      transform: scale(.42);
    }
  }

  .mdui-slider-label {
    background-color: @slider-light-color-disabled;
  }

  input[type="range"]:active~.mdui-slider-thumb {
    .mdui-slider-label {
      transform: translate(-50%) rotate(-45deg) scale(1);
    }
  }
}

/**
 * =============================================================================
 * ************   Slider dark   ************
 * =============================================================================
 */
.layout-theme({

  // 轨道
  .mdui-slider-track {

    &::before {
      background-color: @slider-dark-color;
    }
  }

  .mdui-slider-lable {
    background-color: @slider-dark-color-focus;
  }

  .mdui-slider-thumb::before {
    background-color: #dedede;
  }

  // 鼠标按下状态
  .mdui-slider-actived {
    .mdui-slider-track {

      &::before {
        background-color: @slider-dark-color-focus;
      }
    }
  }

  // 滑块值为 0
  .mdui-slider-zero {
    .mdui-slider-thumb::after {
      background-color: @layout-dark-color-3;
      border-color: @slider-dark-color;
    }

    // 滑块值为 0，且鼠标按下
    &.mdui-slider-actived {
      .mdui-slider-thumb {
        &::after {
          border-color: @slider-dark-color-focus;
        }
      }
    }

    .mdui-slider-label {
      background-color: @slider-dark-color-focus;
    }
  }

  // 禁用状态
  .mdui-slider-disabled {
    .mdui-slider-track {

      &::before {
        background-color: @slider-dark-color-disabled;
      }
    }

    .mdui-slider-fill {

      &::before {
        background-color: @slider-dark-color-disabled;
      }
    }

    .mdui-slider-thumb::after {
      background-color: @slider-dark-color-disabled;
    }

    .mdui-slider-label {
      background-color: @slider-dark-color-disabled;
    }
  }
});